import React, { Component } from 'react'


import Swiper from 'swiper'
import 'swiper/css/swiper.css'

import "./banner.less"

import { connect } from "react-redux"
import action from "../../store/action/index.js"

import { withRouter } from 'react-router-dom'

class Banner extends Component {

    banner = null;
    render() {
        let { similardata } = this.props
        return (
            <div className="swiper-container" ref={(bannerbox) => { this.banner = bannerbox }}>
                <div className="swiper-wrapper">
                    {
                        similardata.map((item, index) => {
                            return <div key={index} className="swiper-slide banner_img" onClick={() => {
                                sessionStorage.setItem("shop_id", JSON.stringify(item.commodity_id))
                                sessionStorage.setItem("shop_img", JSON.stringify(item.commodity_images[0]))
                                this.props.history.go(0)
                            }}>
                                <img style={{ height: "20vh" }} src={item.commodity_images[0]} className="Img" />
                                <p>{item.commodity_namer}</p>
                            </div>
                        })
                    }
                </div>
            </div>

        )
    }

    componentDidMount() {
        var swiper = new Swiper('.swiper-container', {
            // history: true,
            slidesPerView: 2,
            slidesPerGroup: 4,
            spaceBetween: 20,
        });
    }
}

export default connect(state => state.foodf, action.foodf)(withRouter(Banner))
